<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乌拉圭进口西冷牛排</title>
    <link rel="stylesheet" href="../css/food.css">
    <link rel="stylesheet" href="../css/top.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/food_details.css">
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css">
    <script src="../lib/jquery-1.12.4.js"></script>
    <script src="../js/food_details.js"></script>
    <script src="../js/footer.js"></script>
    <script>
        $(function () {
            //注册输入框获得光标事件
            $('#topTxt').focus(function () {
                //判断输入框里的内容是否和原来文本相同；是则清空
                if ($('#topTxt').val() === '请输入关键词') {
                    $(this).val('');
                }
                ;
            });
            $('#topTxt').blur(function () {
                //判断输入框里的内容是否为空，为空则回到初始文本，不为空则不改动里面的内容；
                if ($('#topTxt').val() === '') {
                    $(this).val('请输入关键词');
                }
                ;
            });
            $('#topBtn').click(function () {
                $('#topTxt').val('');
            })
        })
    </script>
</head>
<body>
<!--顶部-->
<div class="top">
    <!--顶部板心-->
    <div class="zyq-top w">
        <!--顶部logo-->
        <div class="zyq-logo fl">
            <img src="../images/logo.png" alt="">
        </div>
        <!--顶部导航栏-->
        <div class="top-nav clearfix fl">
            <ul class="clearfix">
                <li><a href="../lh-home.html">首页</a></li>
                <li><a href="whereof.html">关于我们</a></li>
                <li><a href="hcy-gsxw.html">公司新闻</a></li>
                <li><a href="food.html">产品展示</a></li>
                <li><a href="tuandui.html">团队展示</a></li>
                <li><a href="zyq-lxwm.html">联系我们</a></li>
            </ul>
        </div>
        <!--顶部搜索框-->
        <div class="top-search fl clearfix">
            <input type="text" value="请输入关键词" id="topTxt" class="topTxt">
            <span id="topBtn"><i class="iconfont icon-sousuo"></i></span>
        </div>
        <!--购物车部分-->
        <div class="top-shop fl">
            <i class="iconfont icon-gouwuche"></i>
            <span>0</span>
        </div>
    </div>
</div>
<!--牛肉列表部分-->
<div class="food_detail w">
    <div class="foodHeader clearfix">
        <!--食物左边部分-->
        <div class="food_left fl">
            <a href="#"><img src="../images/-1505.jpg" alt=""></a>
        </div>
        <!--食物右边部分-->
        <div class="food_right fl">
            <!--食物标题-->
            <div class="cp_header">
                <h1 class="title">乌拉圭进口西冷牛排（清真）500g</h1>
            </div>
            <!--食物介绍-->
            <div class="cp_jieshao">
                <div class="jieshao_detail">乌拉圭牛肉营养丰富，特点是脂肪低，乌拉圭牛肉除了含有一般的锌、铁、维他命B等微量元素之外，还含有大量的omega3和抗氧化剂维生素E</div>
            </div>
            <!--食物价格-->
            <div class="food_price">
                <span>￥&nbsp;0.00</span>
            </div>
            <!--食物数量部分-->
            <div class="food_num">
                <span class="num_title">数量：</span>
                <span class="num-control">
                    <!--减-->
                    <a class="num_jian">
                        <i class="iconfont icon-jian"></i>
                    </a>
                    <!--输入框-->
                    <input type="text" value="1" class="num_input">
                    <!--加-->
                    <a class="num_jia">
                        <i class="iconfont icon-add"></i>
                    </a>
                </span>
            </div>
            <!--购买按钮部分-->
            <div class="buy_btn">
                <a href="#">
                    <div>
                        <i class="iconfont icon-gouwuche"></i>
                        <span class="buybtn_text">加入购物车</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <!-- 食物列表部分 -->
    <div class="food_list clearfix">
        <ul class="fl">
            <li class="fl swy_list">
                <a href="swy_details.html" class="list_link" target="_blank">
                    <div class="swy_img">
                        <img src="../images/-1494.jpg" alt="">
                    </div>
                    <div class="list_bottom">
                        <h5 class="list_title">大西洋冰鲜级三文鱼 纯肉 300g</h5>
                    </div>
                </a>
            </li>
            <li class="fl swy_list">
                <a href="boluo_details.html" class="list_link">
                    <div class="swy_img">
                        <img src="../images/-1489.jpg" alt="">
                    </div>
                    <div class="list_bottom">
                        <h5 class="list_title">台湾 金钻凤梨 1个/单果1140g-1400g果肉金黄 自然成熟 台湾·</h5>
                    </div>
                </a>
            </li>
            <li class="fl swy_list">
                <a href="jinyou_details.html" class="list_link">
                    <div class="swy_img">
                        <img src="../images/-1488.jpg" alt="">
                    </div>
                    <div class="list_bottom">
                        <h5 class="list_title">泰国进口金柚1个 单果800-1000g</h5>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!--产品详情部分-->
    <div class="xq_content">
        <p>产品详情</p>
    </div>
    <div class="jieshao_img">
        <img src="../images/-1503.jpg" alt="">
        <img src="../images/-1502.jpg" alt="">
        <img src="../images/-1501.jpg" alt="">
        <img src="../images/-1500.jpg" alt="">
    </div>
</div>
<!--footer部分-->
<div class="gzq-footer">
    <div class="gzq-footer-banxin">
        <div class="gzq-footer-dl">
            <dl>
                <dt>帮助中心</dt>
                <dd>订餐指南</dd>
                <dd>配送方式</dd>
                <dd>支付方式</dd>
            </dl>
            <dl>
                <dt>服务支持</dt>
                <dd>售后反馈</dd>
                <dd>意见反馈</dd>
                <dd>手机版</dd>
            </dl>
            <dl>
                <dt>关于我们</dt>
                <dd>了解我们</dd>
                <dd>联系我们</dd>
                <dd>管理后台</dd>
            </dl>
        </div>
        <div class="gzq-footer-right">
            <div class="gzq-footer-erweima"><p> 扫码有惊喜</p><img src="../images/erweima.png" alt=""></div>
            <div class="gzq-footer-line"></div>
            <div class="gzq-footer-phone">
                <span class="gzq-footer-phonenumber"><a href="">400-xxx-0000</a></span>
                <span class="gzq-footer-phonetime">24小时在线</span>
            </div>
        </div>
        <div class="gzq-footer-banquan">
            <span>版权所有:<a href="">六组有限公司</a></span>
            <span>备案号:<a href="">传智313</a></span>
        </div>
    </div>
</div>
</body>
</html>